<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="clock"></div>
    <!--  -->
    <!-- <iframe src="/clock2" frameborder="0" style="display: none"></iframe> -->
    <script>
      // 1.短轮训
      //   setInterval(() => {
      //     const xhr = new XMLHttpRequest();
      //     xhr.open("GET", "/clock", true);
      //     xhr.onload = function () {
      //       clock.innerHTML = xhr.responseText;
      //     };
      //     xhr.send();
      //   }, 1000);

      // 频繁的网络请求，会导致服务端负载出问题，服务端的性能也会受影响， 集群
      // 而且会导致竞速问题 （返回数据的顺序问题）实时性不高
      // 应用比较小，而且不在乎性能，可以考虑采用这种场景

      // 2.长轮训
      //   function polling() {
      //     const xhr = new XMLHttpRequest();
      //     xhr.open("GET", "/clock", true);
      //     xhr.onload = function () {
      //       clock.innerHTML = xhr.responseText;
      //       polling();
      //     };
      //     xhr.send();
      //   }
      //   polling();
      // 这种情况如果派出去的人拿到了最新结果就会返回。 这个目的 是为了能获取到最新的服务端数据（很可能请求数量过多）
      // 请求不停地发送，会有连接堆积问题。 如果数据不更新了，客户端和服务端会中间有一个请求一直消耗着
      // 服务器得有高并发

      const event = new EventSource("http://localhost:3000/clock3");
      event.onmessage = function (e) {
        console.log(e);
        clock.innerHTML = e.data;
      };
    </script>
  </body>
</html>
